<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="root"></div>

		<script src="../../lib/react.development.js"></script>
		<script src="../../lib/react-dom.development.js"></script>
		<script src="../../lib/babel.min.js"></script>

		<script type="text/babel">
			class App extends React.Component {
				constructor() {
					super()
					this.state = {
						msg: 'Hello World',
						isReady: false,
						friend: null
					}
				}

				render() {
					const { isReady, friend } = this.state

					let showEle = null
					if (isReady) {
						showEle = <h2>准备开始比赛吧</h2>
					} else [
						showEle = <div>请提前做好准备</div>
					]

					return (
						<div>
							{/* 方式一：根据条件给变量赋值不同的内容 */}
							<div>{ showEle }</div>
							
							{/* 方式二：三元运算符 */}
							<div>{ isReady ? <h2>开始战斗</h2> : <div>赶紧准备</div> }</div>
							
							{/* 方式三：&& 逻辑运算符，friend 为 null 时，不会展示，JSX 的特性 */}
							<div>{ friend && friend.name + ' ' + friend.desc }</div>
						</div>
					)
				}
			}

			const root = ReactDOM.createRoot(document.querySelector('#root'))
			root.render(<App />)
		</script>
	</body>
</html>
